<template>
    <div class="main-container" id="main-aps">
        <div class="flex-container">
            <div>
                <div style="background-color: #fff;height:100%" id="ProductMasterData">
                    <div class="jzys">
                        <div class="jzys-title">
                            <span>待排产</span>
                        </div>
                        <div class="contenter-sty">
                            <div class="sty-bj">
                                <router-link to="">待开流转卡: 50个订单计划</router-link>
                            </div>
                        </div>
                        <div class="contenter-sty">
                            <div class="sty-bj">
                                <router-link to="">已开流转卡: 50个订单计划</router-link>
                            </div>
                        </div>
                        <div class="contenter-sty">
                            <div class="sty-bj">
                                <span>已审核: 50个流转卡</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div style="background-color: #fff;height:100%" id="ProductMasterData">
                    <div class="jzys">
                        <div class="jzys-title">
                            <span>预排产</span>
                        </div>
                        <div class="contenter-sty">
                            <div class="sty-bj">
                                <router-link to="">待开流转卡: 50个订单计划</router-link>
                            </div>
                        </div>
                        <div class="contenter-sty">
                            <div class="sty-bj">
                                <router-link to="">已开流转卡: 50个订单计划</router-link>
                            </div>
                        </div>
                        <div class="contenter-sty">
                            <div class="sty-bj">
                                <span>已审核: 50个流转卡</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div style="background-color: #fff;height:100%" id="ProductMasterData">
                    <div class="jzys">
                        <div class="jzys-title">
                            <span>排产</span>
                        </div>
                        <div class="contenter-sty">
                            <div class="sty-bj">
                                <router-link to="">待开流转卡: 50个订单计划</router-link>
                            </div>
                        </div>
                        <div class="contenter-sty">
                            <div class="sty-bj">
                                <router-link to="">已开流转卡: 50个订单计划</router-link>
                            </div>
                        </div>
                        <div class="contenter-sty">
                            <div class="sty-bj">
                                <span>已审核: 50个流转卡</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>







    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { post } from '@/api/http'
export default defineComponent({
    name: 'ProcessCardNumberManagement',
    setup() {
        post({
            url:'aps/schedulOrder/getSchedulInfo',
        }).then(({data})=>{

        })
        const pageData = reactive({
            tableIndex: "1"
        })


        const tabsChange = (e: string | number) => {
            pageData.tableIndex = e as string
            //    if (e === '1') {
            //         emitter.emit('refresh-ClothSet')
            //     }  
        }
        return {
            pageData,
            tabsChange,
        }
    },
})
</script>
<style scoped>
.flex-container {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-around;
}

.flex-container>div {
    position: relative;
    background-color: #f1f1f1;
    width: 400px;
    height: 500px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
}

.main-container {
    height: 100%;
}

.jzys {
    width: 100%;
    height: 100%;
    position: absolute;

    box-shadow: 0px 7px 15px -3px #d4d4d4;
}

.jzys-title {
    height: 60px;
    background-color: #5e8af5;
    color: #ffffff;
    text-align: center;
    line-height: 60px;
    font-size: 26px;
}

.contenter-sty {
    font-size: 23px;
    color: #707070;
    cursor: pointer;
}

.sty-bj {
    width: 270px;
    margin: 0 auto;
    padding: 30px 0;
    text-align: center;
    border-bottom: 2px dashed #d4d4d4;
}

.contenter-sty:hover {
    background-color: #f7f8fa;
}
</style>